<script lang="ts">
import { defineComponent } from 'vue'
import { ElMenu, ElMenuItem, ElDivider } from 'element-plus'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: "HeaderComponent",
  components: {
    ElMenu,
    ElMenuItem,
    ElDivider
  },
  setup() {
    const router = useRouter()

    // 导航跳转方法
    const handleNav = (path: string) => {
      if (path && path !== '') {
        router.push(path)
      }
    }

    return {
      handleNav
    }
  }
})
</script>

<template>
  <div class="header-container">
    <!-- 水平导航菜单，配置透明背景相关样式 -->
    <el-menu
      mode="horizontal"
      :background-color="'transparent'"
      text-color="#fff"
      active-text-color="#409EFF"
      class="custom-header-menu"
    >
      <!-- 首页，路由路径为根路径 -->
      <el-menu-item @click="handleNav('/')">
        首页
      </el-menu-item>
      <el-divider
        class="menu-divider"
        direction="vertical"
      />

      <!-- 身份证认证页 -->
      <el-menu-item @click="handleNav('/idcard-verification')">
        实名认证
      </el-menu-item>
      <el-divider
        class="menu-divider"
        direction="vertical"
      />

      <!-- 用户资料详情页 -->
      <el-menu-item @click="handleNav('/user-profile-one')">
        我的资料详情
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.header-container {
  width: 100%;
  /* 可根据需要设置头部内边距等，让导航和页面内容有间隔 */
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
/* 自定义菜单样式，优化透明背景下的显示 */
.custom-header-menu {
  border: none; /* 去掉默认边框 */
  height: 60px;
  line-height: 60px;
}
/* 鼠标悬浮菜单项样式，可按需调整 */
.el-menu-item:hover {
  color: #409EFF;
}
/* 分割线样式 */
.menu-divider {
  margin: 0 15px;
  height: 30px;
  vertical-align: middle;
}
</style>